import React, { PureComponent } from 'react';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Input, Row, Col } from 'antd';
import colors from '../../../../css/colors';

const redColor = colors.debtAndProfit.text[0];

class FormCreditLine extends PureComponent {
  render() {
    const { onChange, value, disabled } = this.props;
    const handleAdd = () => {
      if (disabled) return;
      if (value.length == 1 && value[0].startMaturity == '全部') {
        // 只有一条全部时 替换掉全部
        onChange([{ key: new Date().getTime(), startMaturity: '', endMaturity: '', creditLine: '' }]);
        return;
      }
      onChange([...value, { key: new Date().getTime(), startMaturity: '', endMaturity: '', creditLine: '' }]);
    };
    const handleOnChange = (e, key, type) => {
      onChange(
        value.map((it) => {
          if (it.key === key) {
            return { ...it, [type]: e.target.value };
          }
          return it;
        }),
      );
    };
    const handleDelete = (key) => {
      if (disabled) return;
      const arr = value.filter((it) => it.key !== key);
      if (!arr.length) {
        arr.push({ key: new Date().getTime(), startMaturity: '全部', endMaturity: '全部', creditLine: '' });
      }
      onChange(arr);
    };
    const iconClass = value.length == 1 && value[0].startMaturity == '全部' ? 'minusNone' : '';
    const iconClass1 = !disabled ? '' : 'minusDisabled';

    return (
      <>
        <div style={{ maxHeight: '117px', overflow: 'auto' }}>
          {value.map((item) => (
            <Row key={item.key} style={{ position: 'relative', marginBottom: 10 }}>
              {item.startMaturity == '全部' ? (
                <>
                  <Col span={9} style={{ marginRight: '20px' }}>
                    <Input disabled={true} value={item.startMaturity} />
                  </Col>
                </>
              ) : (
                <>
                  <Col span={4}>
                    <Input disabled={disabled} value={item.startMaturity} style={{ width: '100%' }} onChange={(e) => handleOnChange(e, item.key, 'startMaturity')} />
                  </Col>
                  <Col span={1} style={{ textAlign: 'center' }}>
                    <span>—</span>
                  </Col>
                  <Col span={4} style={{ marginRight: '20px' }}>
                    <Input disabled={disabled} style={{ width: '100%' }} value={item.endMaturity} onChange={(e) => handleOnChange(e, item.key, 'endMaturity')} />
                  </Col>
                </>
              )}
              <Col span={9}>
                <Input disabled={disabled} style={{ width: '100%' }} suffix='万元' value={item.creditLine} onChange={(e) => handleOnChange(e, item.key, 'creditLine')} />
              </Col>
              <MinusCircleOutlined
                className={`colorMinus ${iconClass} ${iconClass1}`}
                style={{ color: iconClass1 ? 'inherit' : redColor }}
                onClick={() => handleDelete(item.key)}
              />
            </Row>
          ))}
        </div>
        <PlusCircleOutlined className={`colorPlus ${iconClass1}`} onClick={handleAdd} />
      </>
    );
  }
}
export default FormCreditLine;
